<template>
  <div id="app">
    <ul>
        <li v-for="(item,index) in title" :key="index" @click="font(index)">{{item}}</li>
    </ul>
    <h1 v-if="good.length==0">暂无商品上新</h1>
    <div class="good" v-for="(item,index) in good" :key="index">
        <div class="left">
            <img :src="item.picture" alt="">
        </div>
        <div class="right">
            <p>{{item.name}}</p>
            <p>{{item.name}}</p>
            <p>{{item.little}}</p>
            <span>￥{{item.min_price}}</span>
            <button @click="hand(index)">{{num==index?"已抢":"马上抢"}}</button>
            <p><span>{{item.promotion_info}}</span>
            <span>已售{{item.month_saled}}份</span></p>
        </div>
    </div>
  </div>
</template>

<script>
import { tuanList } from '@/utils/service'

export default {
data(){
    return {
        go:true,
        title:["正在抢购","上新预告"],
        good:[],
        num:0
    }
},
mounted(){
tuanList({status:0}).then((res)=>{
    console.log(res.data)
    this.good=res.data.list
})
},
methods:{
    hand(index){
        this.num=index
        console.log(index)
    }
}
}
</script>

<style lang="scss" scoped>
#app h1 {
    text-align: center;
    line-height: 50px;
}
ul {
    margin-left: 16px;
    position: absolute;
top: 164px;
}
ul>li{
    float: left;
    padding: 0 6px;
    color: #fff;
    list-style: none;
}
.good{
    width: 90%;
    height: 167px;
    margin: 0 5%;
    margin-bottom: 10px;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 10px;
    background: #fff;
}
.left {
    float: left;
}
.right {
    float:left;
    margin-left: 10px;
}
.left img {
    width: 97px;
    height: 126px;
}
.right p:nth-child(1){
    color: #999;
    padding: 4px 0;
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.right p:nth-child(2){
    font-size: 18px;
    font-weight: bold;
    width: 200px;
   white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.right p:nth-child(3){
    color: red;
    color: 14px;
}
.right span:nth-child(4){
    color: red;
    font-weight: bold;
    font-size: 18px;
}
.right button:nth-child(5){
    background: rgb(230, 63, 12);
    border: none;
    outline: none;
    height: 30px;
    border-radius:30px ;
    width: 98px;
    color: #e1e1e1;
    text-align: center;
    margin-left:45px ;
}
.right p:nth-child(6) span:nth-child(1){
    color: #999;
    font-size: 13px;
}
.right p:nth-child(6) span:nth-child(2){
    margin-left: 87px;
    color: crimson;
    font-size: 13px;
}
#app {
    padding-bottom: 50px;
}
</style>